<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>吸顶灯效果</title>
		<script src="../js/jquery-1.11.1.js"></script>
		<script>
			//ready()事件源语法：$(document).ready(function(){});
			//				简写：$(function(){});
			//总结：页面元素全部加载完毕，在执行JQ相关操作
			// script元素放在最后一个body位置【可不写】
			//吸顶灯效果----【了解】BOM案例：浏览器6个对象的方法使用
			/* 思路：1.鼠标滚动，滚动吸顶灯元素位置处，效果改变
					2.页面顶部到吸顶灯位置:200xp,大于200px
					3.追加第一个样式：固定定位，页面顶部位置
					
					1.追加样式：吸顶灯在页面顶部
					2.固定值：页面顶部到吸顶灯位置
					3.固定值>滚动值，滚动范围超出200px  实现切换
			 */
			$(function(){
			//offset()   获取或者设置元素相对文档偏移量
			//offset().top   从顶部到吸顶灯元素的偏移量
			var se=$("#sticky_element").offset().top;
			
			//滚动值：BOM对象+事件源
			//$(window)抓取与面上的window对象，监听窗口改变，滚动
			//理解： 实时抓取页面滚动值
			$(window).scroll(function(){
			//滚动值：获取页面滚动的位置
			//scrollTop()获取页面滚动的垂直距离
			var st=$(window).scrollTop();
			//判断   固定值大于滚动值，滚动超出200，实现切换：吸顶效果
			if(st>se){
				//条件成立：大于200   切换吸顶效果
				$("#sticky_element").addClass("sticky");
			}else{
				//条件不成立：小于200
				$("#sticky_element").removeClass("sticky");
			}
			});
			});
		</script>
		<style>
			/* 顶部样式 */
			#top_context{
				width: 100%;
				height: 200px;
				text-align: center;
				line-height: 200px;
				background-color: #f0f0f0;
			}
			#sticky_element{
				width: 100%;
				height: 40px;
				text-align: center;
				line-height: 40px;
				background-color: #333333;
				color: white;
				
			}
			#main_context{
				width: 100%;
				height: 8000px;
			}
			.sticky{
				position: fixed;
				top: 0;
				width: 100%;
			}
		</style>
	</head>
	<body>
		<div id="top_context">顶部内容区域</div>
		<div id="sticky_element">我是吸顶元素</div>
		<div id="main_context">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Corrupti 
		perferendis ea ut neque ipsa corporis, explicabo,necessitatibus vel doloremque eum, vero 
		sint odit suscipit libero maiores doloribus temporibus assumenda illum?Lorem ipsum, dolor 
		sit amet consectetur adipisicing elit. Voluptatem iste assumenda quibusdam provident modi 
		rerum? Voluptas porro tempora ad. Dolorum possimus debitis saepe amet corrupti quaerat sed 
		laboriosam. Ad, itaque Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore quae
		 veniam repellendus nesciunt placeat fuga amet, aut, ab, unde maiores rerum laboriosam. Numquam
		  vitae delectus similique pariatur illo, amet quae.
		</div>
		
	</body>
</html>